<template>
  <div class="main-box">
    <el-form :model="leaveForm" :rules="rules" ref="leaveForm" label-width="100px" class="demo-ruleForm">
       <el-form-item label="请假人学号" prop="leaveStuId">
        <el-input v-model="leaveForm.leaveStuId" disabled></el-input>
      </el-form-item> 
      <el-form-item label="请假标题" prop="leaveTitle">
        <el-input v-model="leaveForm.leaveTitle"></el-input>
      </el-form-item>
      <el-form-item label="请假类型" prop="leaveType">
        <el-radio-group v-model="leaveForm.leaveType">
          <el-radio :label="0">病假</el-radio>
          <el-radio :label="1">事假</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="请假理由" prop="leaveReason">
        <el-input type="textarea" v-model="leaveForm.leaveReason"
                  :autosize="{ minRows: 6, maxRows: 10}"></el-input>
      </el-form-item>
     <!--<el-form-item label="图片" prop="leaveFile">
         <el-upload
          class="avatar-uploader"
          :action="action"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="imageName" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item> -->
      <el-form-item label="请假开始时间" required>
        <el-col :span="4">
          <el-form-item>
            <el-date-picker type="date" placeholder="选择日期"
                            style="width: 180px;" v-model="leaveForm.leaveStartTime"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col class="line" :span="1"> - </el-col>
        <el-col :span="4">
          <el-form-item prop="leaveStartTime">
            <el-time-picker placeholder="选择时间" v-model="leaveForm.leaveStartTime"
                            style="width: 180px;"></el-time-picker>
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item label="请假结束时间" required>
        <el-col :span="4">
          <el-form-item>
            <el-date-picker type="date" placeholder="选择日期"
                            style="width: 180px;" v-model="leaveForm.leaveEndTime"></el-date-picker>
          </el-form-item>
        </el-col>
         <el-col class="line" :span="1">-</el-col>
        <el-col :span="4">
          <el-form-item prop="leaveEndTime">
            <el-time-picker placeholder="选择时间" v-model="leaveForm.leaveEndTime"
                            style="width: 180px;"></el-time-picker>
          </el-form-item>
        </el-col>
      </el-form-item>

      <el-form-item label="所属社团" prop="leaveClubId">
        <el-select v-model="leaveForm.leaveClubId" placeholder="请选择" value="">
          <el-option
            v-for="community in communities"
            :key="community.communityId"
            :label="community.communityName"
            :value="community.communityId"
          />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('leaveForm')">立即申请</el-button>
        <el-button @click="resetForm('leaveForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>

import localStorageUtil from '../../../utils/localStorageUtil';

    export default {
        data() {
            return {
                currentUser: localStorageUtil.read('SET_USER'),
                leaveForm: {
                    //leaveId: '', 不该有leaveId
                    leaveClubId: '',
                    leaveTitle: '',
                    leaveType: '',
                    leaveStartTime: null,
                    leaveEndTime: null,
                    leaveImage: '',
                    leaveReason: '',
                    leaveStuId:'',  //学号由前端自动获取
                    // leaveDescription
                },
                date1: '',
                date2: '',
                communities: [],
                /*基础请求路径*/
                baseUrl: 'http://127.0.0.1:8888/community-management-service/',
                /* 图片上传地址*/
                action: 'http://127.0.0.1:8888/community-management-service/uploadImg/',
                imageName: '',
                imageUrl: '',
                rules: {
                    leaveTitle: [
                        {required: true, message: '请输入请假名称', trigger: 'blur'},
                    ],
                    leaveReason: [
                        {required: true, message: '请输入请假理由', trigger: 'blur'}
                    ],
                  /*   leaveStuId: [
                        {required: true, message: '请输入请假人学号', trigger: 'blur'}
                    ], */
                    leaveType: [
                        {required: true, message: '请选择请假类型', trigger: 'change'}
                    ],
                    leaveStartTime: [
                        {type: 'date', required: true, message: '请选择时间', trigger: 'change'}
                    ],
                    leaveEndTime: [
                        {type: 'date', required: true, message: '请选择时间', trigger: 'change'}
                    ],
                    leaveClubId: [
                        {required: true, message: '请输入请假理由', trigger: 'blur'}
                    ],
                }
            };
        },
        created() {
            this.fetchCommunities()
        },
        methods: {
          /*提交请假申请*/ 
            submitForm(formName) {
                  /**解决丢失8小时的问题 */
                this.leaveForm.leaveStartTime = new Date((+new Date(this.leaveForm.leaveStartTime) + 8 * 3600 * 1000))
                this.leaveForm.leaveEndTime = new Date((+new Date(this.leaveForm.leaveEndTime) + 8 * 3600 * 1000))
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$store.dispatch('leave/joinLeave', this.leaveForm).then((res) => {
                          console.log(res);
                            if (res.code === 200) {
                                this.$message({
                                    message: '发布成功',
                                    type: 'success'
                                });
                            }
                            this.resetForm(formName)
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            handleAvatarSuccess(res, file) {
                this.imageName = file.raw.name;
                this.imageUrl = this.baseUrl + 'static/images/' + this.imageName
                /*更新图片信息*/
                this.leaveForm.leaveImage = 'static/images/' + this.imageName
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传图片只能是 JPG 格式!')
                }
                if (!isLt2M) {
                    this.$message.error('上传图片大小不能超过 2MB!')
                }
                return isJPG && isLt2M
            },
            /*获取社团信息*/
            fetchCommunities() {
                this.leaveForm.leaveStuId = this.currentUser.userId;
                this.$store.dispatch('community/findAll').then((res) => {
                    this.communities = res.data
                })
            }
        }
    }
</script>

<style>

  .disabled .el-upload--picture-card {
    display: none;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

  .main-box {
    margin: 2%;
  }
</style>
